@import "breakpoint";


#server-list {
  /**
   * 1 card per row
   */
  .ui.cards > .card {
    width: 100%;
  }

  /**
   * 2 cards per row
   */
  @include respond-to('bigger than small') {
    .ui.cards {
      margin-left: -1em;
      margin-right: -1em;
    }

    .ui.cards > .card {
      width: calc( 50%  -  2em );
      margin-left: 1em;
      margin-right: 1em;
    }
  }

  /**
   * 4 cards per row
   */
  @include respond-to('bigger than small-medium') {
    .ui.cards {
      margin-left: -0.75em;
      margin-right: -0.75em;
    }

    .ui.cards > .card {
      width: calc( 25%  -  1.5em );
      margin-left: 0.75em;
      margin-right: 0.75em;
    }
  }


  .card .content {
    .header, .meta {
      word-break: break-all;
    }
  }
}
